<script setup>
import { ref, computed } from 'vue'

// 文件上传
const fileList = ref([])

// 用户信息
const userInfo = ref({
  username: '西瓜',
  gender: '男',
  birthday: '',
  email: '3345474925@qq.com'
})

// 性别选项
const genderOptions = ref([
  { name: '男', value: 'male' },
  { name: '女', value: 'female' },
  { name: '保密', value: 'secret' }
])

// 日期选择范围
const currentDate = new Date()
const startDate = computed(() => {
  const date = new Date()
  date.setFullYear(currentDate.getFullYear() - 100)
  return formatDate(date)
})
const endDate = computed(() => {
  const date = new Date()
  date.setFullYear(currentDate.getFullYear() + 1)
  return formatDate(date)
})

// 格式化日期为 YYYY-MM-DD
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 性别选择变化
const handleGenderChange = (e) => {
  const index = e.detail.value
  userInfo.value.gender = genderOptions.value[index].name
}

// 生日选择变化
const handleBirthdayChange = (e) => {
  userInfo.value.birthday = e.detail.value
}


// 保存用户信息
const handleSaveUserInfo =()=>{
  console.log('保存用户信息:', userInfo.value)
}
</script>

<template>
  <view class="editor">
      <!-- 用户头像 -->
      <view class="editor-user">
        <uni-file-picker :image-styles="{
          width: '160rpx',
          height: '160rpx',
        }" v-model="fileList">
          <image class="editor-user-image" src="/static/user/user.jpg" mode="aspectFit" />
        </uni-file-picker>
        <view class="editor-user-text">点击更换头像</view>
      </view>

      <!-- 用户简介 -->
      <view class="editor-introduction">
        <view class="editor-introduction-text">
          <h4 class="editor-introduction-text-h4">用户名</h4>
          <input type="text" placeholder="请输入名称" v-model="userInfo.username" />
        </view>

        <!-- 性别选择 -->
        <view class="editor-introduction-text">
          <h4 class="editor-introduction-text-h4">性别</h4>
          <picker class="picker-selector" mode="selector" :range="genderOptions" range-key="name"
            @change="handleGenderChange">
            <view class="picker-value">{{ userInfo.gender }}</view>
          </picker>
        </view>

        <!-- 生日选择 -->
        <view class="editor-introduction-text">
          <h4 class="editor-introduction-text-h4">生日</h4>
          <picker class="picker-date" mode="date" :value="userInfo.birthday" :start="startDate" :end="endDate"
            @change="handleBirthdayChange">
            <view class="picker-value">
              {{ userInfo.birthday || '请选择生日' }}
            </view>
          </picker>
        </view>

        <!-- 输入邮箱 -->
        <view class="editor-introduction-text">
          <h4 class="editor-introduction-text-h4">邮箱</h4>
          <input type="text" placeholder="3345474925@qq.com" v-model="userInfo.email" />
        </view>
      </view>


    <view class="editor-button">
      <button type="primary" @click="handleSaveUserInfo">保存</button>
    </view>

  </view>
</template>

<style lang="scss" scoped>
.editor {
  margin-top: 30rpx;


  &-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    :deep(.uni-file-picker) {
      width: auto;
    }

    &-image {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }

    &-text {
      margin-top: $uni-margin-top;
    }
  }

  &-introduction {
    margin-top: 50rpx;
    height: 400rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    &-text {
      display: flex;
      gap: 50rpx;
      align-items: center;

      &-h4 {
        color: #323333;
        width: 120rpx;
      }

      input,
      .picker-value {
        flex: 1;
        height: 100%;
        color: #666;
      }
    }
  }

  &-button{
    margin-top: 100rpx;
  }
}
</style>